<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script src="angular.js"></script>
  </head>
  <body>
    <div ng-controller="MyController">
      Your name:
        <input type="text" ng-model="username">
        <button ng-click='sayHello()'> {{greeting }}</button>
      <hr>
    </div>
    <div class="show-scope-demo">
      <div ng-controller="GreetCtrl">
        Hello !
      </div>
      <div ng-controller="ListCtrl">
        <ol>
          <li ng-repeat="name in names">{{ name }} from {{ department }}</li>
        </ol>
      </div>
    </div>
    <div ng-controller="EventController">
      Root作用域<tt>MyEvent</tt> {{count}}: 
      <ul>
        <li ng-repeat="i in [1]" ng-controller="EventController">
          <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
          <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
          <br>
          Middle作用域<tt>MyEvent</tt> {{count}}}: 
          <ul>
            <li ng-repeat="item in [1, 2]" ng-controller="EventController">
              Leaf作用域{{item}}<tt>MyEvent</tt> {{count}}}: 
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div ng-controller="Controller">
      <form name="form" class="css-form" novalidate>
        Name:
          <input type="text" ng-model="user.name" name="uName" required /><br />
        E-mail:
          <input type="email" ng-model="user.email" name="uEmail" required/><br />
        <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
          <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
          <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
        </div>
    
        Gender: <input type="radio" ng-model="user.gender" value="male" />male
        <input type="radio" ng-model="user.gender" value="female" />female<br />
    
        <input type="checkbox" ng-model="user.agree" name="userAgree" required />
        I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
                  required /><br />
        <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
    
        <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
        <button ng-click="update(user)"
                ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
      </form>
    </div>
    <div contentEditable="true" ng-model="content" title="Click to edit" ng-app="form-example2">Some</div>
<pre>model ={{content}} </pre>
    
1+2={{1+2}}


    <style type="text/css">
      div[contentEditable] {
        cursor: pointer;
        background-color: #D0D0D0;
      }
    </style>

  </body>
</html>